<!doctype html>
<html lang="en">
  <head>
<!--    <link rel="stylesheet" href="http://10.70.94.96:8080/geoserver/openlayers3/ol.css" type="text/css"> -->
    <link rel="stylesheet" href="https://openlayers.org/en/v4.4.2/css/ol.css" type="text/css">
   
    <style>
      .map {
            width: 768px;
            height: 768px;
            border: 1px solid black;
      }
      #location {
            float: left;
      }
    </style>
<!--    <script src="http://10.70.94.96:8080/geoserver/openlayers3/ol.js" type="text/javascript"></script> -->
      <script src="https://openlayers.org/en/v4.4.2/build/ol.js" type="text/javascript"></script>
    <title>TestOpenLayer</title>
  </head>
  <body>

    <div id="map" class="map"></div>
    <div id="location"></div>
    <script type="text/javascript">
   		var format = 'image/png';
	    var untiled = new ol.layer.Image({
	        source: new ol.source.ImageWMS({
	          ratio: 1,
	          url: 'http://127.0.0.1:8080/geoserver/GisTest/wms',
	          params: {'FORMAT': format,
	                   'VERSION': '1.1.1',  
	                STYLES: '',
	                LAYERS: 'GisTest:google_earth',
	          }
	        })
	      });
		var untiled2 = new ol.layer.Image({
		    source: new ol.source.ImageWMS({
		      ratio: 1,
		      url: 'http://127.0.0.1:8080/geoserver/GisTest/wms',
		      params: {'FORMAT': format,
		               'VERSION': '1.1.1',  
		            STYLES: '',
		            LAYERS: 'GisTest:line',
		      }
		    })
		  });
	    var projection = new ol.proj.Projection({
			code: 'EPSG:4326',
			units: 'degrees',
			axisOrientation: 'neu',
			global: true
	      });	
		var mousePositionControl = new ol.control.MousePosition({
		    className: 'custom-mouse-position',
		    target: document.getElementById('location'),
		    coordinateFormat: ol.coordinate.createStringXY(5),
		    undefinedHTML: '&nbsp;'
		  });	    
		var map = new ol.Map({
		    controls: ol.control.defaults({
		      attribution: false
		    }).extend([mousePositionControl]),
		    target: 'map',
		    layers: [	
		      untiled,
		      untiled2
		    ],
		    view: new ol.View({
		       projection: projection
		    })
		  });
        var bounds = [116.49, 39.99,
                      116.72, 40.13];
		map.getView().fit(bounds, map.getSize());


    </script>
  </body>
</html>